<template>
  <div class="content-box intro-y">
    <hBase :args="args">
      <template #parts>
        <el-table-column prop="catName" label="所属分类" width="180"/>
        <el-table-column prop="companyName" label="企业" width="180"/>
        <el-table-column align="center" label="二维码" width="180">
          <template #default="scope">
            <div class="flex justify-center items-center">
              <img style="width: 40px;height: 40px" alt="" :src="baseUrl+'/UploadFilePath/'+scope.row.qrCode" v-if="scope.row.qrCode"/>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="名称" width="180">
          <template #default="scope">
            <el-tooltip
                class="box-item"
                effect="dark"
                :content="scope.row.productName"
                placement="top-start"
            >
            <span>
              {{ scope.row.productName }}
            </span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="model" label="型号" width="80"/>
        <el-table-column prop="purpose" label="用途" width="120"/>
        <el-table-column label="技术指标" width="120">
          <template #default="scope">
            <el-tooltip
                class="box-item"
                effect="dark"
                :content="scope.row.kdj"
                placement="top-start"
            >
            <span>
              {{ scope.row.kdj }}
            </span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="案例" width="120">
          <template #default="scope">
            <el-tooltip
                class="box-item"
                effect="dark"
                :content="scope.row.case"
                placement="top-start"
            >
            <span>
              {{ scope.row.case }}
            </span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="videoUrl" label="视频链接" width="120"/>
        <el-table-column/>
      </template>
      <template #edit="{ init, close }">
        <edit :init="init" @close="close"></edit>
      </template>
    </hBase>
  </div>
</template>

<script setup>
import {onMounted, computed, ref} from "vue";
import hBase from "../base/hBase.vue";
import * as $api from "@/api/api.js";
import edit from "./Edit.vue"

const userKey = ref(localStorage.getItem("userKey"));
const baseUrl = import.meta.env.VITE_APP_API;
onMounted(() => {
  console.log($api.BATeacherQueryCondition); // 使用 globalProperties 上的 $api
});
const args = computed(() => {
  return {
    search: $api.ProductCompanyQuery,
    remove: $api.ProductCompanyDelete,
    key: (e) => {
      return {
        userKey: userKey.value,
        key: e.productKey,
      };
    },
    keyword: (e) => {
      e.userKey = userKey.value;
      e.key = "";
      e.code = "";
      e.num = 0;
      e.state = 0;
      e.date = new Date();
      e.keyword = e.keyword || "";
      e.rangeStart = "";
      e.rangeEnd = "";
      return e;
    },
  };
});
</script>

<style scoped lang="scss">
:deep().el-table {
  height: 100%;
  .cell {
    height: 48px;
    /* 不同浏览器有不同的前缀，比如-moz-box */
    display: -webkit-box;
    /* 子元素的排列方式：垂直排列 */
    -webkit-box-orient: vertical;
    /* 设置3行文本之后打点显示 */
    -webkit-line-clamp: 2;
    /* 超出盒子部分隐藏显示 */
    overflow: hidden;
    //overflow: auto;
  }
}
</style>